<template>
	<view>
		<!-- <nt-tabs :list="tabs" :show-more="false"></nt-tabs> -->
		<nt-container>
			<view class="nt-check">
				<view class="check-tabs">
					<view class="check-tabs__item active">验券</view>
					<view class="check-tabs__item" @tap="nav('/subpackage/order/pages/check-ticket/history?id=' + orderId)">验券历史</view>
				</view>
				<nt-order-detail :orderInfo="orderInfo"></nt-order-detail>
				<view class="nt-check__item">
					<nt-title label="门店类别"></nt-title>
					<view class="nt-check__item--list">
						<view class="nt-check__item--list-radio" :class="{ active: type == '' }" @tap="selectType('')">全部</view>
						<view class="nt-check__item--list-radio" :class="{ active: type == it.value }" v-for="(it, index) in shopTypeList" :key="index"  @tap="selectType(it.value)">{{ it.name }}</view>
					</view>
				</view>
				<view class="nt-check__item">
					<nt-title label="门店"></nt-title>
					<view class="nt-check__item--picker" @tap="show = true">
						{{ shopName || '请选择门店' }}<text class="iconfont">&#xe6bb;</text>
					</view>
				</view>
				<view class="nt-check__item">
					<nt-title label="验券"></nt-title>
					<input type="text" class="nt-check__item--input" placeholder="请输入券码" placeholder-class="placeholder-class" v-model="receipt_code"/>
				</view>
			</view>
			<view class="nt-check__footer">
				<nt-button text="验券" @tap="submit"></nt-button>
			</view>
			<u-picker
				:show="show" 
				ref="uPicker" 
				:columns="columns"
				@confirm="confrim"
				@close="show = false" 
				@cancel="show = false" 
				keyName="text"
				closeOnClickOverlay
			 ></u-picker>
		</nt-container>
	</view>
</template>

<script>
import { getOrderDetail, postPayReceiptConsume, getMeituanShopType, getMeituanShopUuid } from "@/api"
export default {
	data(){
		return {
			tabs: [{ name: "验券", value: 1 }, { name: "最新验券记录", value: 2 }],
			orderInfo: {},
			orderId: "",
			shopTypeList: [],
			shopList: [],
			show: false,
			type: "",
			columns: [],
			shopName: "",
			open_shop_uuid: "",
			receipt_code: ""
		}
	},
	watch: {
		type: {
			handler(n){
				this.columns = [this.shopList.filter((it) => it.shopname.includes(n))]
			},
			immediate: true
		}
	},
	onLoad(options){
		this.orderId = options.id || ""
		this.getMemberOrderDetail();
		this.getMeituanShopTypeList()
	},
	methods: {
		// 订单详情
		getMemberOrderDetail() {
			getOrderDetail(this.orderId,'postPayReceiptConsume').then(res => {
				const { code, data } = res
				this.orderInfo = data;
				this.getMeituanShopUuidList(data.area)
			})
		},
		// 门店类别
		getMeituanShopTypeList(){
			getMeituanShopType().then(res => {
				console.log(res)
				if(res.code === 1){
					this.shopTypeList = res.data.meituan_shop_uuid_group
				}
			})
		},
		// 门店列表
		getMeituanShopUuidList(area){
			getMeituanShopUuid("广州").then(res => {
				if(res.code === 1){
					this.shopList = res.data
					this.columns = [res.data]
					
				}
			})
		},
		submit(){
			if(!this.receipt_code) return this.toast("请输入券码")
			if(!this.open_shop_uuid) return this.toast("请选择门店")
			postPayReceiptConsume({
				receipt_code: this.receipt_code,
				open_shop_uuid: this.open_shop_uuid,
				realorder_id: this.orderId
			}).then(res => {
				const { code, data } = res;
				if(code === 1){
					this.toast("验券成功")
					setTimeout(() => this.back(), 1000)
				}
			})
		},
		confrim(e){
			this.shopName = e.value[0].text
			this.open_shop_uuid = e.value[0].open_shop_uuid
			this.show = false
		},
		selectType(type){
			this.type = type;
			this.shopName = ""
			this.open_shop_uuid = ""
		}
	}
}
</script>

<style lang="scss" scoped>
.check-tabs{
	display:flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	margin: 20rpx;
	background:#fff;
	&__item{
		flex: 1;
		text-align: center;
		color:#666;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active{
			background: var(--theme-color);
			color:#fff;
		}
		&::before{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			bottom:0;
			left: 0;
			width:1rpx;
			background:#f5f5f5
		}
	}
}
.nt-check{
	padding-bottom: 160rpx;
	/deep/.receiving-container{
		border-radius: 0;
	}
	/deep/.nt-card{
		margin: 0 20rpx;
	}
	&__item{
		padding: 15rpx 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 30rpx;
		&--list{
			display:flex;
			flex-wrap: wrap;
			&-radio{
				height: 50rpx;
				padding: 0 15rpx;
				box-sizing: border-box;
				display:flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				border: 1rpx solid #ccc;
				color:#666;
				font-size: 26rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				&.active{
					border-color: var(--theme-color);
					background:var(--theme-color);
					color:#fff;
				}
			}
		}
		&--input, &--picker{
			height: 60rpx;
			border-radius: 10rpx;
			padding: 0 10rpx;
			border: 1rpx solid #ccc
		}
		&--picker, /deep/.placeholder-class{
			color: #666;
			font-size: 26rpx;
		}
		&--picker{
			line-height: 60rpx;
			position:relative;
			.iconfont{
				position: absolute;
				right: 20rpx;
				top:50%;
				transform: translateY(-50%);
				font-size: 30rpx;
			}
		}
	}
	&__footer{
		position: fixed;
		bottom: 0;
		left:0;
		right: 0;
		padding: 30rpx;
		box-sizing: border-box;
		background: #F2F4F6;
	}
	
}
</style>